<template>
  <div class="import-read-dialog">
    <MyDialog :show="isShowMap" @beforeClose="beforeClose">
      <template #body>
        <div id="map-container"></div>
      </template>
      <div slot="title">
        <p>地址定位</p>
      </div>
    </MyDialog>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "MapShowDialog",
  props: {
    title: {
      type: String,
      default: "定位",
    },
    mapAddressShow: {
      type: Object,
      default: () => {},
    },
    isShowMap: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isShowMap() {
      if (this.isShowMap) {
        setTimeout(() => {
          this.getGreen();
          this.initMap();
        });
      }
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // id是-1，即未绑定仓库 ，则显示总部定位
    getGreen() {
      if (this.mapAddressShow.id == -1) {
        this.mapAddressShow = {
          name: "江苏永山窍档案管理服务有限公司",
          address: "南京市雨花台区绿地之窗C-5栋10楼",
          longitude: 118.797916,
          latitude: 31.973516,
        };
      }
    },
    //百度坐标转高德（传入经度、纬度）
    bd_decrypt(bd_lng, bd_lat) {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = bd_lng - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
      var gg_lng = z * Math.cos(theta);
      var gg_lat = z * Math.sin(theta);
      // return { lng: gg_lng, lat: gg_lat };
      return [gg_lng, gg_lat];
    },
    // 初始化地图
    initMap() {
      // let center = [
      //   this.mapAddressShow.longitude,
      //   this.mapAddressShow.latitude,
      // ];
      let center = this.bd_decrypt(
        this.mapAddressShow.longitude,
        this.mapAddressShow.latitude
      );

      AMapLoader.load({
        key: "673667bd06fafcb535f5c57cca3aafce", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 版本
          plugins: ["overlay/SimpleMarker", "overlay/SimpleInfoWindow"], // 需要加载的 AMapUI ui插件
        },
      })
        .then((AMap) => {
          let map = new AMap.Map("map-container", {
            //设置地图容器id
            // viewMode: "3D", //是否为3D地图模式
            zoom: 16, //初始化地图级别
            center: center,
            // [118.791422, 31.967166], //初始化地图中心点位置
          });

          let infoWindow;
          let name = this.mapAddressShow.name;
          let address = this.mapAddressShow.address;
          //在指定位置打开信息窗体
          function openInfo() {
            //构建信息窗体中显示的内容
            let info = [];
            info.push(
              `<div style="padding:7px 0px 0px 0px;"><h4 style="color:#f88123;">${name}</h4>`
            );
            info.push(`<p class='input-item'>${address}</p></div></div>`);
            info.push(
              "<p class='input-item'>营业时间：08:00~18:30(周一至周日)</p>"
            );

            infoWindow = new AMap.InfoWindow({
              content: info.join(""), //使用默认信息窗体框样式，显示信息内容
              offset: new AMap.Pixel(0, 0),
            });

            infoWindow.open(map, map.getCenter());
          }

          let marker = new AMap.Marker({
            position: map.getCenter(),
            map: map,
            title: this.mapAddressShow.name,
          });

          marker.on("click", openInfo);
        })
        .catch((e) => {});
    },

    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 关闭 右侧X
    beforeClose() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="scss">
#map-container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>
